<template>
    <div class="activity-detail">
      <div class="activity-header">
        <img :src="activity.image" :alt="activity.title" class="activity-image">
        <div class="activity-info">
          <h1>{{ activity.title }}</h1>
          <p class="activity-time">{{ activity.time }}</p>
          <p class="activity-location">{{ activity.location }}</p>
          <p class="activity-status" :class="{'status-active': activity.status === '报名中'}">{{ activity.status }}</p>
          <p class="activity-participants">参与人数: {{ activity.participants }}</p>
        </div>
      </div>
      <div class="activity-description">
        <h2>活动描述</h2>
        <p>{{ activity.description }}</p>
      </div>
      <div class="activity-actions">
        <button class="join-button">参加活动</button>
        <button class="share-button">分享活动</button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  
  export default {
    setup() {
      const activity = ref({});
      const route = useRoute();
  
      onMounted(() => {
        // 假设你有一个 API 来获取活动详情
        fetch(`/api/activities/${route.params.id}`)
          .then(response => response.json())
          .then(data => {
            activity.value = data;
          })
          .catch(error => {
            console.error('Error fetching activity details:', error);
          });
      });
  
      return {
        activity,
      };
    },
  };
  </script>
  
  <style scoped>
  .activity-detail {
    font-family: Arial, sans-serif;
  }
  
  .activity-header {
    display: flex;
    margin-bottom: 20px;
  }
  
  .activity-image {
    width: 200px;
    height: auto;
    margin-right: 20px;
  }
  
  .activity-info {
    flex: 1;
  }
  
  .activity-time, .activity-location, .activity-status, .activity-participants {
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .activity-status {
    color: #f56c6c;
  }
  
  .status-active {
    color: #67c23a;
  }
  
  .activity-description {
    margin-bottom: 20px;
  }
  
  .activity-description h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .activity-actions {
    display: flex;
    justify-content: space-around;
  }
  
  .join-button, .share-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .join-button {
    background-color: #409eff;
    color: white;
  }
  
  .share-button {
    background-color: #f5f5f5;
    color: #666;
  }
  </style>
  